<template is="msgItem1">
	<view class="content">
		<view class="top-red">
			<view class="top-bg">{{title}}</view>
			<view class="bottom-hb" @click="gotofaqi">
				<img class="hb" src="/static/hongbao.png" alt="红包">
				<view class="content-hb">
					<view class="title">发起拍照红包</view>
					<view class="l-title">好友按要求拍摄，就能领取红包奖励</view>
				</view>
				<img class="right" src="/static/right.png" alt="右侧角标"></img>
			</view>
		</view>
		
		<view class="input-content">
			<view class="hb-content">
				
				<view class="hb-money">
					<view class="title">总金额</view>
					<view class="element">元</view>
					<input class="number uni-input" @input="buttontype" v-model="money" type="digit" placeholder="请输入金额" placeholder-class="number_pla"/>
				</view>
				
				<view class="hb-money">
					<view class="title">红包个数</view>
					<view class="element">个</view>
					<input class="number uni-input" @input="buttontype" v-model="number" type="number" placeholder="请输入个数" placeholder-class="number_pla"/>
				</view>
				
			</view>
		</view>
		
		<view class="charge" v-if="result != '0'">
			需要支付：¥{{charge}}服务费
		</view>
		<view class="goto-hb" v-bind:class="button?'goto-hb-on':''" @click="gotohb">
			塞钱发红包
		</view>
		
		<view class="tixian" @click="tixian">玩法规则</view>
		
		
		
	</view>
</template>





<script>
	export default {
		data() {
			return {
				title: '来拍,我发红包你来拍照',
				money:"",
				number:"",
				charge: "0.00",
				button:false,
				
				token:"",
				imgtitle:"",
				imgurl:"",
				
				result:"0",
				ordernum:"",
				
				ifcharge:""
			}
		},
		onShow(){
			var _self = this
			
			const value = uni.getStorageSync('userinfo');
			const hbinfo = uni.getStorageSync('hbinfo');
			if (value) {
				_self.token = value.token
				console.log(_self.token)
			}
			if(hbinfo){
				_self.imgtitle = hbinfo.imgtitle
				_self.imgurl = hbinfo.img
			}
			
			uni.checkSession({
				success () {
					uni.request({
					    url: _self.$url + '/api/lucky_money/serviceCharge', //红包费率
						method:"post",
					    data: {
					        
					    },
						header: {
							'token': _self.token //自定义请求头信息
						},
					    success: (res) => {
					        _self.result = res.data.result
					    }
					})//获取红包费率
				},
			})
			
		},
		onLoad() {
			
		},
		methods: {
			ceshi(){
				uni.navigateTo({
				    url: '/pages/index/takephotos?id=31',
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			},
			tixian(){
				uni.navigateTo({
				    url: '/pages/index/explain',
				    animationType: 'pop-in',
				    animationDuration: 200
				});
			},
			gotofaqi(){
				uni.checkSession({
				  success () {
				    uni.navigateTo({
				        url: '/pages/index/launch',
				        animationType: 'pop-in',
				        animationDuration: 200
				    });
				  },
				  fail () {
				    uni.navigateTo({
				        url: '/pages/index/authorization',
				        animationType: 'pop-in',
				        animationDuration: 200
				    });
				  }
				})
			},//发起拍照红包
			buttontype:function(event){
				if(this.money != "" && this.number != ""){
					this.button = true
				}else{
					this.button = false
				}
				if(this.money != ""){
					var _self = this
					let number = _self.money * _self.result / 100
					_self.charge = number.toFixed(2)
				}
			},//判断按钮是否可以点击 和 红包费率
			gotohb:function(event){
				var _self = this
				if(this.button){
					uni.checkSession({
						success () {
						  uni.request({
								url: _self.$url + '/api/lucky_money/deliverLuckyMoney', 
								method:"post",
								data: {
									pic_url:_self.imgurl,
									money:_self.money,
									num:_self.number,
									desc:_self.imgtitle
								},
								header: {
									'token': _self.token 
								},
								success: (res) => {
									if(res.data.status != 1){
										uni.showToast({
										    title: res.data.msg,
										    duration: 3000,
											icon:"none",
											mask:true
										});
									}
									_self.ordernum = res.data.result.order_sn
									let sid = res.data.result.id
									uni.request({
										url: _self.$url + '/api/wxpay/dopay', 
										method:"post",
										data: {
											order_sn:_self.ordernum
										},
										header: {
											'token': _self.token 
										},
										success: (res) => {
											
											var timeS = String(res.data.result.timeStamp)
											uni.requestPayment({
											    provider: 'wxpay',
											    timeStamp: timeS,
											    nonceStr: res.data.result.nonceStr,
											    package: res.data.result.package,
											    signType: res.data.result.signType,
											    paySign: res.data.result.sign,
											    success: function (res) {
													uni.navigateTo({
													    url: '/pages/index/share?id=' + sid,
													    animationType: 'pop-in',
													    animationDuration: 200
													});
											    },
											    fail: function (err) {
											        console.log('fail:' + JSON.stringify(err));
											    }
											});
										}
									})
								}
						  })
						},
						fail () {
						  uni.navigateTo({
						      url: '/pages/index/authorization',
						      animationType: 'pop-in',
						      animationDuration: 200
						  });
						}
					})
				}
			},//提交的时候判断是否可以提交
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
		font-size: 14px;
	}
	.top-red{
		position: relative;
	}
	.top-bg{
		background: url(~@/static/bg.png) no-repeat;
		background-size: 100%;
		width: 100%;
		height: 200px;
		text-align: center;
		color:#fff;
		font-size: 20px;
		line-height: 150px;
	}
	.bottom-hb{
		background: #fff;
		position: absolute;
		bottom:-38px;
		width: 90%;
		height: 75px;
		left: 5%;
		border-radius: 5px;
		.hb{
			width: 90rpx;
			height: 80rpx;
			float: left;
			margin:35rpx 15rpx 0 10rpx;
		}
		.content-hb{
			width: 470rpx;
			float: left;
			padding:32rpx 5rpx;
			.l-title{
				color:#C4C4C4;
				font-size: 14px;
			}
		}
		.right{
			width: 30rpx;
			height: 30rpx;
			float: left;
			margin-top: 63rpx;
			margin-left: 10px;
		}
		
	}
	
	.input-content{
		margin-top:150rpx;
	}
	.hb-money{
		background: #fff;
		width: 90%;
		margin:0 auto;
		border-radius: 5px;
		padding:25rpx 35rpx 20rpx 35rpx;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom:40rpx;
		.title{
			float: left;
			width: 30%;
		}
		.number{
			width: 50%;
			float: right;
			text-align: right;
			margin-right:20rpx;
		}
		.number_pla{
			color:#C4C4C4;
		}
		.element{
			float: right;
			margin-top:2rpx;
		}
		
	}
	.charge{
		color:#C4C4C4;
		text-align: center;
		margin-top:80rpx;
	}
	.goto-hb{
		width: 90%;
		background: #FFC1C5;
		text-align: center;
		padding:25rpx 0;
		border-radius: 5px;
		color: #fff;
		margin:15rpx auto;
	}
	.goto-hb-on{
		background:#F4313E;
	}
	.tixian{
		width: 100%;
		margin:50rpx auto;
		text-align: center;
	}
	
</style>
